<template>
	<div class="app-container">
		<div style="display:flex;align-items: center;margin-bottom: 16px;">
			<p
				style="fontweight: bold;margin-bottom: 0; margin-top: 0;margin-right: 16px;"
			>
				轮播图列表
			</p>
			<el-button type="primary" @click="addBanner">新增</el-button>
		</div>

		<!--查询表单-->
		<!-- <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="crmQuery.name" placeholder="讲师名" />
      </el-form-item>

      <el-form-item>
        <el-select v-model="crmQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="crmQuery.startDate"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="crmQuery.endDate"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form> -->

		<!-- 表格 -->
		<el-table
			v-loading="listLoading"
			:data="list"
			border
			fit
			highlight-current-row
		>
			<el-table-column label="序号" width="70" align="center">
				<template slot-scope="scope">
					{{ (crmQuery.pageNum - 1) * crmQuery.pageSize + scope.$index + 1 }}
				</template>
			</el-table-column>

			<el-table-column prop="title" label="名称" />

			<el-table-column label="图片预览">
				<template slot-scope="scope">
					<el-image
						@click="previewPic(scope.row.imageUrl)"
						style="width: 200px; height: 100px"
						:src="scope.row.imageUrl"
						fit="fill"
						:preview-src-list="srcList"
					></el-image>
				</template>
			</el-table-column>

			<el-table-column width="200" prop="linkUrl" label="路径" />

			<el-table-column prop="gmtCreate" label="添加时间" width="160" />

			<el-table-column prop="sort" label="排序" width="60" />

			<el-table-column label="操作" width="200" align="center">
				<template slot-scope="scope">
					<el-button
						@click="updateBanner(scope.row.id)"
						type="primary"
						size="mini"
						icon="el-icon-edit"
						>修改</el-button
					>
					<el-button
						type="danger"
						size="mini"
						icon="el-icon-delete"
						@click="removeDataById(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination
			:current-page="crmQuery.pageNum"
			:page-size="crmQuery.pageSize"
			:total="total"
			style="padding: 30px 0; text-align: center"
			layout="total, prev, pager, next, jumper"
			@current-change="getList"
		/>

		<!-- 添加和修改 -->
		<el-dialog :visible.sync="dialogFormVisible" :title="title">
			<el-form :model="formData" label-width="120px">
				<el-form-item label="图片名称">
					<el-input v-model="formData.title" />
				</el-form-item>

				<el-form-item label="上传图片">
					<el-upload
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
						:action="BASE_API + '/eduoss/fileoss'"
						class="uploader"
					>
						<el-button size="small" type="primary">上传图片</el-button>
						<img
							style="margin-left:8px;"
							width="100"
							:src="formData.imageUrl"
						/>
					</el-upload>
				</el-form-item>
				<el-form-item label="路径">
					<el-input v-model="formData.linkUrl" />
				</el-form-item>
				<el-form-item label="排序">
					<el-input-number
						v-model="formData.sort"
						:min="0"
						controls-position="right"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveOrUpdate">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import crmbanner from "@/api/edu/crmbanner";

export default {
	data() {
		//定义变量和函数值
		return {
			listLoading: false,
			list: null, //查询之后接口放回的集合
			total: 10, //总记录数
			//查询条件
			crmQuery: {
				pageNum: 1, //开始页
				pageSize: 10 //每页记录数
			},
			srcList: [
				"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
			],
			dialogFormVisible: false,
			title: "",
			formData: {
				title: "",
				sort: "",
				linkUrl: "",
				imageUrl: ""
			},
			BASE_API: process.env.BASE_API // 接口API地址
		};
	},

	created() {
		//页面渲染之前执行，一般调用methods中的方法
		this.getList();
	},
	methods: {
		//创建具体的方法，调用teacher.js定义的方法
		getList(page = 1) {
			this.listLoading = true;
			this.crmQuery.pageNum = page;
			crmbanner
				.getBannerList(this.crmQuery)
				.then(response => {
					//请求成功，response接口返回的数据
					this.list = response.data.list;
					this.total = response.data.total;
					this.listLoading = false;
				})
				.catch(error => {
					console.log(error);
				}); //请求失败
		},
		resetData() {
			//清空的方法
			//双向绑定输入框的数据清空
			this.crmQuery = { pageNum: 1, pageSize: 10 };
			this.getList();
		},
		removeDataById(id) {
			this.$confirm("此操作将永久删除轮播图, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				//点击确定，执行then方法
				//调用删除的方法
				crmbanner.removeBannerById(id).then(response => {
					//删除成功
					//提示信息
					this.$message({
						type: "success",
						message: "删除成功!"
					});
					//回到列表页面
					this.getList();
				});
			}); //点击取消，执行catch方法
		},
		previewPic(url) {
			this.srcList = [url];
		},
		addBanner() {
			this.title = "添加";
			this.formData = {
				id: "",
				title: "",
				sort: "",
				linkUrl: "",
				imageUrl: ""
			};
			this.dialogFormVisible = true;
		},
		async updateBanner(id) {
      const res=await crmbanner.getBannerById(id);
      // console.log(res);
      if(res.code==200){
        this.title = "修改";
        this.formData = {...res.data};
        this.dialogFormVisible = true;
      }
		},
		async saveOrUpdate() {
			let res;
			if (this.formData.id) {
				res = await crmbanner.updateBanner(this.formData);
			} else {
				res = await crmbanner.addBanner(this.formData);
			}
      // console.log('res: ', res);
			if (res.code == 200) {
				//关闭弹框
				this.dialogFormVisible = false;
				//提示
				this.$message({
					type: "success",
					message: `${this.title}成功!`
				});
				//刷新页面
				this.getList();
			}
		},
		//上传封面成功调用的方法
		handleAvatarSuccess(res, file) {
			this.formData.imageUrl = res.data.url;
		},
		//上传之前调用的方法
		beforeAvatarUpload(file) {
			// console.log('file: ', file);
			const isJPG = file.type === "image/jpeg" || file.type === "image/png";
			const isLt2M = file.size / 1024 / 1024 < 5;

			if (!isJPG) {
				this.$message.error("上传图片只能是 JPG、png 格式!");
			}
			if (!isLt2M) {
				this.$message.error("上传图片大小不能超过 5MB!");
			}
			return isJPG && isLt2M;
		}
	}
};
</script>

<style lang="scss" scoped>
.uploader{
  /deep/ .el-upload{
    display: flex;
    align-items: center;
  }
}
</style>
